<!-- 库存详情 -->
<template>
    <div class="page has-navbar stockDetail" @click.stop="dialogBtn=true;">
        <div class="page-content" @click.stop="searchArr=[]">
            <div class="tab-change-wrap">
                <div class="change-tab">
                    <div @click.stop="changeModeType">
                        <span>商品</span>
                        <span class="tab"><i :class="modeType=='PRODUCT'?'':'other'"></i></span>
                        <span>原料</span>
                    </div>
                </div>
                <div class="change-tab">
                    <div @click.stop="changeTab">
                        <span>上架</span>
                        <span class="tab"><i :class="nowTab=='in'?'':'other'"></i></span>
                        <span>下架</span>
                    </div>
                </div>
            </div>
            <div class="bar bar-header item-input-inset">
                <label class="item-input-wrapper"><i class="icon ion-ios-search placeholder-icon"></i>
                    <!-- <form action="javascript:;" @submit="onSearch" id="von-search-8xz"> -->
                    <input type="search" placeholder="输入名称" v-model="keywords">
                    <!-- </form> -->
                </label>
                <button type="button" class="button button-clear button-positive" @click="onCancel">取消</button>
            </div>
            <template v-if="modeType == 'PRODUCT'">
                <div class="listTitle clearfix" style="text-align:center;" >
                    <div style="width:30%;text-align:left;" class="left">商品名称</div>
                    <div style="width:25%" class="left">原有数量</div>
                    <div style="width:25%" class="left">{{nowTab=='out'?'下架数量':'上架数量'}}</div>
                    <div style="width:20%" class="left">操作</div>
                    <div class="ser-list" v-if="searchArr.length" @click.stop="">
                        <ul>
                        <li v-for="(item,index) in searchArr" :key="index" v-text="item.name" @click="getSearchItem(item)"></li>
                        </ul>
                    </div>
                </div>
                <scroll>
                    <div style="text-align:center;" v-if="nowTab=='out'">
                        <list class="list-ios">
                            <item v-for="(item,ind) in homeArr" :key="ind" class="listItem">
                                <div style="width:30%;text-align:left;" v-text="item.name" class="left"></div>
                                <div style="width:25%" v-text="item.quantity" class="left"></div>
                                <div style="width:25%" class="left inp">
                                    <input type="text" v-model="item.single"  maxlength="4"/>
                                </div>
                                <div style="width:20%;color:blue;" class="left"  @click="del(item,ind)">删除</div>
                            </item>
                        </list>
                    </div>
                    <div style="text-align:center;" v-if="nowTab=='in'">
                        <list class="list-ios">
                            <item v-for="(item,ind) in homeArr" :key="ind" class="listItem">
                                <div style="width:30%;text-align:left;" v-text="item.name" class="left"></div>
                                <div style="width:25%" v-text="item.quantity" class="left"></div>
                                <div style="width:25%" class="left inp">
                                    <input type="text" v-model="item.single"  maxlength="4"/>
                                </div>
                                <div style="width:20%;color:blue;" class="left"  @click="del(item,ind)">删除</div>
                            </item>
                        </list>
                    </div>
                </scroll>
            </template>
            <template v-if="modeType == 'MATERIAL'">
                <div class="listTitle clearfix" style="text-align:center;" >
                    <div style="width:30%;text-align:left;" class="left">原料名称</div>
                    <div style="width:25%" class="left">原有数量</div>
                    <div style="width:25%" class="left">{{nowTab=='out'?'下架数量':'上架数量'}}</div>
                    <div style="width:20%" class="left">操作</div>
                    <div class="ser-list" v-if="searchArr.length" @click.stop="">
                        <ul>
                        <li v-for="(item,index) in searchArr" :key="index" v-text="item.name" @click="getSearchItem(item)"></li>
                        </ul>
                    </div>
                </div>
                <scroll>
                    <div style="text-align:center;" v-if="nowTab=='out'">
                        <list class="list-ios">
                            <item v-for="(item,ind) in homeArr" :key="ind" class="listItem">
                                <div style="width:30%;text-align:left;" v-text="item.name" class="left"></div>
                                <div style="width:25%" v-text="item.quantity" class="left"></div>
                                <div style="width:25%" class="left inp">
                                    <input type="text" v-model="item.single"  maxlength="4"/>
                                </div>
                                <div style="width:20%;color:blue;" class="left"  @click="del(item,ind)">删除</div>
                            </item>
                        </list>
                    </div>
                    <div style="text-align:center;" v-if="nowTab=='in'">
                        <list class="list-ios">
                            <item v-for="(item,ind) in homeArr" :key="ind" class="listItem">
                                <div style="width:30%;text-align:left;" v-text="item.name" class="left"></div>
                                <div style="width:25%" v-text="item.quantity" class="left"></div>
                                <div style="width:25%" class="left inp">
                                    <input type="text" v-model="item.single"  maxlength="4"/>
                                </div>
                                <div style="width:20%;color:blue;" class="left"  @click="del(item,ind)">删除</div>
                            </item>
                        </list>
                    </div>
                </scroll>
            </template>
            <div class="confirm">
                <button @click="willUp">下一步</button>
            </div>
        </div>
        <div class="mask" v-if="dialogBtn">
            <div class="alert-tab">
                <div class="tit">
                    {{nowTab=='in'?'上架':'下架'}}商品共{{billData.kind}}种
                </div>
                <div class="next-item">
                    <span class="tit-span">总额:</span>
                    <span class="tit-cont">
                        <input type="text" v-model="billData.totalAmount" placeholder="总金额,选填" />
                    </span>
                </div>
                <!-- <div class="next-item">
                    <span class="tit-span">原因:</span>
                    <span class="tit-cont">
                        <select name="" id="" v-model="billData.typeValue" v-if="nowTab=='out'">
                            <option :value="im.value" v-for="(im,ix) in typeOptions" :key="ix">{{im.label}}</option>
                        </select>
                        <select name="" id="" v-model="billData.typeValue" v-if="nowTab=='in'">
                            <option :value="im.value" v-for="(im,ix) in typeOptionsIn" :key="ix">{{im.label}}</option>
                        </select>
                    </span>
                </div> -->
                <div class="next-item">
                    <span class="tit-span">备注:</span>
                    <span class="tit-cont">
                        <input type="text" v-model="billData.notes" placeholder="选填" />
                    </span>
                </div>
                <div class="btn">
                    <span @click.stop="dialogBtn=false">取消</span>
                    <span class="sure" @click.stop="stockUp">确定</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
import {INV_URL} from "./../../../../urlConfig/index";
export default{
    props: ['storeId'],
	data () {
		return {
            modeType:"PRODUCT",
            dialogBtn:false,
            typeOptionsIn: [
                // {value: 'CHECK_IN',label: '盘点入库'},
                // {value: 'REFUND_IN',label: '退单入库'},
                { value: "PURCHASE_IN", label: "采购入库" },
                { value: "ALLOCATION_IN", label: "调拨入库" },
                { value: "INNER_IN", label: "吧台退回" }
            ],
            typeOptions: [
				// {value: 'SALES_OUT',label: '销售出库'},
				{value: 'INNER_OUT',label: '仓库至吧台'},
				{value: 'REFUND_OUT',label: '退货出库'},
				{value: 'ALLOCATION_OUT',label: '店铺调拨'},
		    ],
            stockList: [],
            searchList: [],
            keywords: '',
            searching: false,
            nowTab:"in",
            homeArr:[],//列表
            searchArr:[],//搜索的商品列表
            billData:{
	        	typeValue: '',
	        	notes:'',
	        	totalAmount:0,//用户手动输入的总金额
	        	imgUrl:'',
	        	kind:0,
	        	printNum:1
	        },
            preventBtn:true,
			stockInData:null
		}
    },
    watch:{
        nowTab(val){
            if(val=='out'){
                this.billData = {
                    typeValue: '',
                    notes:'',
                    totalAmount:0,//用户手动输入的总金额
                    imgUrl:'',
                    kind:0,
                    printNum:1
                }
            }else if(val=='in'){
                this.billData = {
                    typeValue: '',
                    notes:'',
                    totalAmount:0,//用户手动输入的总金额
                    imgUrl:'',
                    kind:0,
                    printNum:1
                };
            }
        },
	    keywords(val){
		   	this.searchArr = [];
		   	if(!val){
		   		return;
		   	}
		   	// 搜索
			this.$http({
				url:INV_URL+'search',
				method:'GET',
				params:{
					storeId:this.storeId,
					q:val,
                    mold:this.modeType
				}
			}).then(res=>{
				this.searchArr = res.data;
			});
	   }
	},
    methods: {
        changeModeType(){
            this.homeArr = [];
            this.modeType == "PRODUCT"?this.modeType="MATERIAL":this.modeType="PRODUCT";
        },
        //删除某个商品
		del(item,ind){
            this.homeArr.splice(ind ,1);
		},
        changeTab(){
            this.nowTab=="out"?this.nowTab="in":this.nowTab="out";
        },
        // 获得列表
        getInventoryList: function () {
            // this.$http.get('inventories?storeId='+this.storeId).then((res)=>{
            //     this.stockList = res.data;
            // });

            this.$http.get('products/stores-search?storeId='+this.storeId+'&q='+encodeURI('')+'&stockEnabled=true').then((res)=>{
                // console.log(res.data)
                this.stockList = res.data;
            })
        },
        willUp(){
            if(this.nowTab=='out'){
                let kind = 0;
                if(this.homeArr.length==0){
                    $toast.show('请选择商品', 2000).then(() => {})
                    return;
                }else{
                    for (var i = 0; i < this.homeArr.length; i++) {
                        if(!/^\d+$/.test(this.homeArr[i].single)){
                            $toast.show('请输入正确的  '+this.homeArr[i].name+'  商品个数', 2000).then(() => {})
                            return;
                        }
                        if(this.homeArr[i].single !== 0){
                            kind++;
                        }
                    };
                }
                this.dialogBtn=true;
                this.billData={typeValue: '',notes:'',totalAmount:0,imgUrl:'',printNum:1,isPrint:false,kind};
            }else if(this.nowTab=='in'){
                let kind = 0;
                if(this.homeArr.length==0){
                    $toast.show('请选择商品', 2000).then(() => {})
                    return;
                }else{
	    		    for (var i = 0; i < this.homeArr.length; i++) {
                        if(!/^\d+$/.test(this.homeArr[i].single)){
                            $toast.show('请输入正确的  '+this.homeArr[i].name+'  商品个数', 2000).then(() => {})
                            return;
                        }
                        if(this.homeArr[i].single !== 0){
                            kind++;
                        }else{
                            $toast.show(this.homeArr[i].name+' 上架数量为0，请检查并修改为大于0的数字', 2000).then(() => {})
                            return;
                        }
                        if(this.homeArr[i].single == 0){
                            $toast.show(this.homeArr[i].name+' 上架数量为0，请检查并修改为大于0的数字', 2000).then(() => {})
                            return;
                        }
                    };
                }
                this.dialogBtn=true;
                this.billData={typeValue: '',notes:'',totalAmount:0,imgUrl:'',printNum:1,isPrint:false,kind}
            }
			
	    },
        //根据id获取某个商品
	    getSearchItem(item){
	    	let empId = localStorage.getItem('empId');
            let empName = localStorage.getItem('empName');
			this.searchItem = item;
	    	for (var i = 0; i < this.homeArr.length; i++) {
	    		if(this.homeArr[i].id==item.id){
                    $toast.show('请勿重复添加', 2000).then(() => {})
			        return;
	    		}
	    	};
	    	if(this.modeType == "PRODUCT"){
                this.$http({
					url:INV_URL+'get-product',
					method:'GET',
					params:{
						productId:item.id,
						storeId:this.storeId,
						empId:empId,
                        mold:this.modeType
					}
                }).then(res=>{
                    console.log(res);
                    this.keywords = '';
                    this.stockInData = res.data;
                    this.stockInData.single = 0;
                    this.homeArr.push(this.stockInData);
                });
			}else{
                this.$http({
					url:INV_URL+'detail',
					method:'GET',
					params:{
						id:item.id,
					}
                }).then(res=>{
                    console.log(res);
                    this.keywords = '';
                    res.data.quantity = res.data.stockQty;
                    this.stockInData = res.data;
                    this.stockInData.single = 0;
                    this.homeArr.push(this.stockInData);
                });
			}
			
	    },
        onSearch() {
            // this.$http.get('products/stores-search?storeId='+this.storeId+'&q='+encodeURI(this.keywords)+'&stockEnabled=true').then((res)=>{
            //     this.searchList = res.data;
            //     if ( this.searchList[0] ) {
            //         this.searching = true;
            //     } else {
            //         $toast.show('无相关结果', 2000).then(() => {})
            //     }

            //     document.getElementsByTagName('input')[0].blur();
            // }).catch(()=>{

            // })
            // 
            // 
            // new
            // new
        },
        //提交数据
	    stockUp(){
            if(!/^\d{0,9}$/.test(parseFloat(this.billData.totalAmount)*100)){
                $toast.show('总金额格式有误', 2000).then(() => {})
                return;
			};
			
	    	if ( !this.preventBtn ) {
                return;
            }
            this.preventBtn = false;
	    	
			let empId = localStorage.getItem('empId');
            let empName = localStorage.getItem('empName');
			let body = {
				// reason:this.billData.typeValue,
				storeId:this.storeId,
				notes:this.billData.notes,
				empId,
				amount:parseFloat(this.billData.totalAmount),
				skuCount:0,
				operatorName:empName,
				notes:this.billData.notes,
				barProducts:[],
                mold:this.modeType
            };
			
			for (let i = 0; i < this.homeArr.length; i++) {
				if(this.homeArr[i].single !== 0){
					let newInventores = {
						productId:this.homeArr[i].id,
						name:this.homeArr[i].name,
						quantity:this.homeArr[i].single
					};
					body.skuCount+=parseInt(this.homeArr[i].single);
					body.barProducts.push(newInventores);
				}else{
                    $toast.show(this.homeArr[i].name+' 上架数量不能为0，如不上架请删除', 2000).then(() => {})
					this.preventBtn = true;
					return;
				}
            }
            if(this.nowTab == 'in'){
                body = Object.assign(body,{code:this.$uuid(),});
                this.$http.post(INV_URL+'stockIn',body).then((res)=>{
                    if(res.data.code === 400){
                        $toast.show(res.data.msg, 2000).then(() => {})
                        this.preventBtn = true;
                        return;
                    }
                    $toast.show('操作成功', 2000).then(() => {})
                    this.homeArr = [];
                    this.dialogBtn = false;
                    setTimeout(()=>{
                        this.preventBtn = true;
                    },1000)
                }).catch((err)=>{
                    setTimeout(()=>{
                        this.preventBtn = true;
                    },1000)
                })
            }else if(this.nowTab == 'out'){
                body = Object.assign(body,{skuCount:undefined,});
                this.$http.post(INV_URL+'stockOut',body).then((res)=>{
                    console.log(res);
                    if(res.data.code === 400){
                        $toast.show(res.data.msg, 2000).then(() => {})
                        this.preventBtn = true;
                        return;
                    }
                    $toast.show("操作成功", 2000).then(() => {})
                    this.homeArr = [];
                    this.dialogBtn = false;
                setTimeout(()=>{
                        this.preventBtn = true;
                    },1000)
                }).catch((err)=>{
                    setTimeout(()=>{
                        this.preventBtn = true;
                    },1000)
                })
            }
	    },
        onCancel() {
            // this.searching = false;
            this.keywords = '';
		   	this.searchArr = [];

        }
    },
    created(){
        // this.getInventoryList();
    },
    updated() {
       $("input").blur(function(){
            console.log('失去焦点')
            window.scrollTo(0,0);
        }); 
    },
    mounted(){
        document.title = "吧台上下架";
        $("input").blur(function(){
            console.log('失去焦点')
            window.scrollTo(0,0);
        });
        /*document.getElementsByTagName('input')[0].onblur = ()=>{
            this.onSearch();
        }*/
    }
}
</script>
<style lang="scss" scoped>
	@import "barUpDown";
</style>
